<template>
  <el-card shadow="never">
    <template #header>
      <slot name="header"></slot>
    </template>

    <div class="flex">
      <ElAvatar
        class="mr2 w140px flex-shrink-0"
        shape="square"
        :size="140"
        :src="user?.auditStatus === 0 ? user?.auditAvatar : user?.avatar"
      />

      <el-row class="flex-grow-1">
        <el-col :span="24" id="info" class="mb4">
          <span class="name font-size-7 font600 color-blue">{{ user?.nickname }}</span>
          <span class="sex">
            <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="user?.sex || '-'" />
          </span>
          <span class="isRealName rd bg-red p1 font-size-3">{{
            user?.haveReal === 1 ? '已实名' : '未实名'
          }}</span>
          <span class="levelName" v-if="user?.userLevel">
            <dict-tag :type="DICT_TYPE.MEMBER_LEVEL" :value="user?.userLevel || '-'" />
          </span>
          <span class="sharePerson" v-if="user?.distributors">
            <span class="label color-gray">分销员: </span>
            {{ user?.distributors }}
          </span>
          <span class="id">
            <span class="label color-gray">会员编号: </span>
            {{ user?.userNo }}
          </span>
          <span class="serialNumber">
            <span class="label color-gray">用户ID: </span>
            {{ user?.id }}
          </span>
        </el-col>

        <el-col :span="24" id="monologue" class="h-21 rd bg-#f5f7f9 p3">
          <span class="label">内心独白: </span>
          {{ user?.innerMonologue }}
        </el-col>
      </el-row>
    </div>

    <el-row>
      <el-col :span="24" class="mt5">
        <el-descriptions :column="3">
          <!-- roW 1 -->
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="生日" />
            </template>
            {{ formatDate(user?.birthday, 'YYYY-MM-DD') }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="年龄" />
            </template>
            {{ user?.age }}岁
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="身高" />
            </template>
            {{ user?.height }}cm
          </el-descriptions-item>

          <!-- roW 2 -->
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="体重" />
            </template>
            {{ user?.weight }}kg
          </el-descriptions-item>
          <el-descriptions-item label="手机号">
            <template #label>
              <descriptions-item-label label="手机号" />
            </template>
            {{ user?.mobile }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="学历" />
            </template>
            <dict-tag :type="DICT_TYPE.USER_EDUCATION" :value="user?.education || '-'" />
          </el-descriptions-item>

          <!-- roW 3 -->
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="婚况" />
            </template>
            <dict-tag :type="DICT_TYPE.MARITAL_STATUS" :value="user?.marriage || '-'" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="月收入" />
            </template>
            <dict-tag :type="DICT_TYPE.MATCHINCOME" :value="user?.monthIncome || '-'" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="职业" />
            </template>
            {{ user?.career }}
          </el-descriptions-item>

          <!--  -->
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="是否购房" />
            </template>
            <dict-tag :type="DICT_TYPE.PURCHASE_SITUATION" :value="user?.purchasHouse || '-'" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="是否购车" />
            </template>
            <dict-tag :type="DICT_TYPE.PURCHASE_CAR" :value="user?.purchasCar || '-'" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="是否有孩子" />
            </template>
            <dict-tag :type="DICT_TYPE.HAVE_CHILDREN" :value="user?.withChild || '-'" />
          </el-descriptions-item>

          <!--  -->
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="是否要孩子" />
            </template>
            <dict-tag :type="DICT_TYPE.WANT_CHILD" :value="user?.wantChild || '-'" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="何时结婚" />
            </template>
            <dict-tag :type="DICT_TYPE.WHEN_MARRY" :value="user?.marryDate || '-'" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="是否吸烟" />
            </template>
            <dict-tag :type="DICT_TYPE.HAVA_SMOK" :value="user?.smoker || '-'" />
          </el-descriptions-item>

          <!--  -->
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="是否喝酒" />
            </template>
            <dict-tag :type="DICT_TYPE.HAVE_DRINK" :value="user?.drink || '-'" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="民族" />
            </template>
            <dict-tag :type="DICT_TYPE.NATION" :value="user?.nation || '-'" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="星座" />
            </template>
            <dict-tag :type="DICT_TYPE.CONSTELLATION" :value="user?.constellation || '-'" />
          </el-descriptions-item>

          <!--  -->
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="籍贯" />
            </template>
            {{ user?.nativePlaceName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <descriptions-item-label label="所在地" />
            </template>
            {{ user?.areaName }}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>

      <el-col :span="24" class="mt5">
        <template v-for="item in user?.memberUserTagRespVOS" :key="item?.id">
          <span class="mr5 b-1 b-color-blue rd b-solid px2 py.5 font-size-16px color-blue">{{
            item?.label
          }}</span>
        </template>
      </el-col>
    </el-row>
  </el-card>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
import * as UserApi from '@/api/member/user'
import { DescriptionsItemLabel } from '@/components/Descriptions/index'
import { DICT_TYPE } from '@/utils/dict'

const { user } = defineProps<{ user: UserApi.UserVO }>()
</script>
<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* stylelint-disable-next-line rule-empty-line-before */
#info span {
  margin: 0 0.5rem;
}
</style>
@/api/member/user/index2
